<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--给页面的相对路径明确指定一个参照物-->
  <base href="http://localhost:8080/appsys/">
</head>
<body>

<div id="app">
  <form>
    <div v-show="errorMsg" style="color:red">{{errorMsg}}</div>
    用户名： <input type="text" v-model="loginUser.devCode"> <br>
    密码： <input type="password" v-model="loginUser.devPassword"> <br>
    <input type="button" value="登录" @click="doLogin">
    <input type="reset" value="重置">
  </form>
</div>


<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/qs.min.js"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data:{
      loginUser:{
        devCode:'',
        devPassword: ''
      },
      errorMsg: null
    },
    methods:{
      doLogin:function () {
        // 非空判断
        if(this.loginUser.devCode ==="" || this.loginUser.devPassword ===""){
          alert('用户名或密码不能为空！');
          return;
        }
        // 获取参数，把参数转为表单格式
        var params = Qs.stringify(this.loginUser);

        // 发送请求到服务器
        var that = this;
        axios.post("http://localhost:8080/appsys/dev/dologin",params)
        .then(function (res) {
            if(res.data.code == 0){
              // 登录成功，跳转页面
              location.href="static/page/applist.html";
            }else{
              // 显示信息
              that.errorMsg = res.data.message;
            }
        });

      }
    }
  });

</script>
</body>
</html>
